/**
 *************************************
 * 单选、多选表单组件
 *************************************
 */
.run-select {
    height:24px;
    line-height:24px;
}

.run-select:hover {
    cursor:pointer;
}

.run-select:after {
    display:block;
    content:'';
    clear:both;
}

.run-select .pic-con , .run-select .text-con {
    float:left;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
}

.run-select .pic-con {
    width:24px;
    height:24px;
    position:relative;
}

.run-select .pic-con .pic {
    width:16px;
    height:16px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate3d(-50% , -50% , 0px);
    -webkit-transform:translate3d(-50% , -50% , 0px);
    -moz-transform:translate3d(-50% , -50% , 0px);
    -ms-transform:translate3d(-50% , -50% , 0px);
    -o-transform:translate3d(-50% , -50% , 0px);
    -o-transform:translate3d(-50% , -50% , 0px);
}

.run-select .text-con {
    font-size:12px;
    white-space:nowrap;
}

/**
 *******************
 * 输入表单项集成样式
 *******************
 */
.run-input {
    position:relative;
    margin-bottom:26px;
    /*
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    */
}

.run-input:nth-last-of-type(1) {
    margin-bottom:0px;
}

/*
 * 调试的时候可打开使用
.run-input:hover::after {
	width:100%;
}

.run-input:hover .field {
	font-size:12px;
	color:#999;
	transform:translate3d(0px , -24px , 0px);
}
*/

.run-input > .field , .run-input .value {
    height:40px;
    line-height:40px;
    transform-origin:left top;
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    -ms-transform-origin:left top;
    -o-transform-origin:left top;
    transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
}

.run-input > .field {
    color:#8f8f8f;
    font-size:13px;
    position:absolute;
    top:0px;
    left:0px;
    transform: translate3d(12px , 0% , 0px);
    -webkit-transform: translate3d(12px , 0% , 0px);
    -moz-transform: translate3d(12px , 0% , 0px);
    -ms-transform: translate3d(12px , 0% , 0px);
    -o-transform: translate3d(12px , 0% , 0px);
}

.run-input > .value {
    position:relative;
    z-index:1;
    background-color:transparent;
    border-bottom:2px solid #ddd;
    margin-bottom:8px;
}

.run-input .value:after {
    display:block;
    content:'';
    width:0%;
    height:2px;
    position:absolute;
    bottom:0px;
    left:50%;
    transform:translate3d(-50% , 100% , 0px);
    -webkit-transform:translate3d(-50% , 100% , 0px);
    -moz-transform:translate3d(-50% , 100% , 0px);
    -ms-transform:translate3d(-50% , 100% , 0px);
    -o-transform:translate3d(-50% , 100% , 0px);
    background-color:#589fc6;
    transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
}

.run-input > .value > .form-text {
    display:block;
    width:100%;
    height:100%;
    text-indent:0px;
    border-color:transparent;
    box-shadow:none;
    background-color:transparent;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
}

.run-input .explain {
    font-size:12px;
    color:#555;
}

/***获取焦点的时候***/
.focus-component-input .value::after {
    width:100%;
}

.not-empty-component-input > .field {
    font-size:12px;
    color:#999;
    transform:translate3d(0px , -30px , 0px);
    -webkit-transform:translate3d(0px , -30px , 0px);
    -moz-transform:translate3d(0px , -30px , 0px);
    -ms-transform:translate3d(0px , -30px , 0px);
    -o-transform:translate3d(0px , -30px , 0px);
}